
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { filterDate } from '@/utils/format'
import { fetchGetNotificationList, fetchPostNotification, fetchDeleteNotification, fetchPutNotification } from '@/api/notification'
import type { FormInstance, FormRules } from "element-plus";


const router = useRouter();
/**
 * 跳转详情页面
 */
const navDetail = (row: any) => {
  router.push({ path: '/student/activity/detail', query: { ...row } })
}
/**
 * 点击删除按钮
 */
const handleDelete = (row: any) => {
  fetchDeleteNotification({id:row.id}).then((res: { code: number; }) => {
    if (res.code == 200) {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
    }
    getPageList()
  })
}

const typeOptions = [
  {
    value: 0,
    label: '置顶',
  },
  {
    value: 1,
    label: '不置顶',
  },
]


// 表单数据
let tableData = reactive([])
// 实际传递的条件
const listQuery = reactive({
  currentPage: 1,
  sticky: undefined, // 名称
  title: undefined, // 类型
  pageSize: 10,
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  sticky: undefined, // 名称
  title: undefined, // 类型
})
const total = ref<number>(0)// 列表总数
// 查询
const handleSearch = () => {
  getPageList()
}

const tableLoading = ref(false)
// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery.sticky = showQuery.sticky
  listQuery.title = showQuery.title
  const res = await fetchGetNotificationList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  data.forEach((item: { sticky: number | boolean; }) => {
    // item.sticky = item.sticky == 0 ? true : false
    if (item.sticky == 0) {
      item.sticky = false
    } else {
      item.sticky = true
    }
  })
  tableData = data
  tableLoading.value = false
}

onMounted(() => {
  getPageList()
})
let showInfoDialog = ref(false); // 是否展示物资信息编辑框
const resetForm = (formEl: FormInstance | undefined) => {
  // 重置验证规则
  if (!formEl) return;
  showInfoDialog.value = false
  formEl.resetFields();
};
let ruleForm = reactive({
  title: '',
  content: '',
});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  title: [{ required: true, message: "请输入标题", trigger: "change" }],
  content: [{ required: true, message: "请输入内容", trigger: "change" }],
});
// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      fetchPostNotification(ruleForm).then((res: { code: number; }) => {
        if (res.code == 200) {
          ElMessage({
            message: '操作成功',
            type: 'success'
          })
        }
        showInfoDialog.value = false
        getPageList()
      })
    } else {
      console.log("error submit!", fields);
    }
  });
};
const handleInfo = (isShow: boolean) => {
  showInfoDialog.value = isShow;
};
//  更改活动是否需要审批
const changeSwitch = (row: any) => {
  fetchPutNotification({ id: row.id, sticky: row.sticky == true ? 1 : 0 }).then((res: { code: any; }) => {
    if (Number(res.code) == 200) {
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
    }
  })
}
</script>

<template>
  <div class="notification-content container">
    <div class="header flex justify-between items-center">
      <div>
        <el-select v-model="showQuery.sticky" class="m-2" placeholder="是否置顶" clearable>
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input v-model="showQuery.title" placeholder="根据通知标题查询" clearable />
        <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
          查询
        </el-button>
      </div>
      <el-button @click="handleInfo(true)" type="primary" :icon="Plus" class="btn-green">
        新增
      </el-button>
    </div>

    <el-table :data="tableData" stripe v-loading="tableLoading">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="title" label="通知标题" show-overflow-tooltip />
      <el-table-column prop="content" label="通知内容" show-overflow-tooltip />
      <el-table-column prop="type" label="是否置顶">
        <template #default="scope">
          <div>
            <el-switch v-model="scope.row.sticky" class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #DCDFE6" @change="changeSwitch(scope.row)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="发布时间">
        <template #default="scope">
          <div>
            {{ filterDate(scope.row.createdAt) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <div class="theme-success">
            <el-button type="primary" class="btn-white" @click="navDetail(scope.row)">查看</el-button>
            <!-- <el-button type="primary" class="btn-red" @click="handleDelete(scope.row)">删除</el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />

    <!-- 编辑弹框 -->
    <div class="el-dialog-25">
      <el-dialog v-model="showInfoDialog" title="新增通知" @close="resetForm(ruleFormRef)">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
          <el-form-item label="标题：" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="内容：" prop="content">
            <el-input v-model="ruleForm.content" placeholder="请输入" clearable type="textarea" :rows="4" />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)" class="btn-white">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn-green">
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss">
.notification-content {
  width: 100%;
  min-height: 45rem;
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;
  background-color: #fff;

  .header {
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 0 2rem;

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 22rem;
    }
  }
}
</style>

